<template>
    <div class="layer layer-image"
         :class="{ active: active, notify: imageDpi < 75, 'layer-customize': !!layer.customize }">
        <div class="customize-name">
            <el-tooltip class="item" effect="dark" placement="top">
                <template slot="content">
                    <a style="color: #fff; text-decoration: underline;cursor:pointer"
                       onMouseOver="this.style.textDecoration='none';"
                       onMouseOut="this.style.textDecoration='underline';"
                       href="/document/help-center?classify=3&detail=95" target="_blank">
                        Click to understand Custom layer
                    </a>
                </template>
                <img class="custom-icon" src="https://img.podpartner.com/static/images-20230202/custom-icon.png" alt="">
            </el-tooltip>
            <span>Custom layer:</span>
            <div class="customize-input">
                <p v-text="customCache"></p>
                <label>
                    <input type="text" v-model="customCache" @blur="setCustomize($event)" />
                    <svg-icon name="user-template-edit"></svg-icon>
                </label>
            </div>
        </div>
        <div class="layer-content">
            <!-- 图片内容 -->
            <div class="layer-info">
                <figure>
                    <img crossOrigin="anonymous" :style="$fiexImage(layer.w, layer.h, 1)"
                         :src="getImagePreview(layer)" />
                </figure>
                <h2>
                    <strong v-text="layer.name"></strong>
                    <span v-show="imageDpi >= 150" style="color:#23B98F">High resolution</span>
                    <span v-show="imageDpi < 150 && imageDpi >= 75" style="color: #EDB002;">Medium resolution</span>
                    <span v-show="imageDpi < 75" style="color: #F44336;">Low resolution</span>
                </h2>
                <div class="handle" @click="setActive(layer)"></div>
                <div class="layer-info-button">
                    <slot></slot>
                </div>
            </div>

            <!-- 图片因数 -->
            <div class="layer-factor">

                <!-- 位置大小 -->
                <div class="factor-input">
                    <UxInputNumber name="Scale" unit="%" v-model="layerScale" :step="0.1" :precision="2" :min="1"
                                   :max="1000" />
                    <UxInputNumber name="Rotate" unit="deg" v-model="layerRotate" :step="1" :min="0" :max="360" />
                    <UxInputNumber name="Right" unit="%" v-model="layerLeft" :step="0.1" :precision="2"
                                   :min="layerRange.minX" :max="100" />
                    <UxInputNumber name="Down" unit="%" v-model="layerTop" :step="0.1" :precision="2"
                                   :min="layerRange.minY" :max="100" />
                </div>

                <!-- 对齐 -->
                <div class="factor-align">
                    <button @click="setAlign('left')" title="Left align">
                        <svg-icon name="tooler-left" />
                    </button>
                    <button @click="setAlign('center')" title="Horizontal center align">
                        <svg-icon name="tooler-center" />
                    </button>
                    <button @click="setAlign('right')" title="right align">
                        <svg-icon name="tooler-right" />
                    </button>
                    <button @click="setAlign('top')" title="Top align">
                        <svg-icon name="tooler-top" />
                    </button>
                    <button @click="setAlign('middle')" title="Vertical center align">
                        <svg-icon name="tooler-middle" />
                    </button>
                    <button @click="setAlign('bottom')" title="Bottom align">
                        <svg-icon name="tooler-bottom" />
                    </button>
                </div>

                <!-- 翻转 -->
                <div class="factor-flip">
                    <button @click="setTypes('hor')" :class="{ active: layer.flipX }" title="Flip horizontal">
                        <svg-icon name="tooler-fliphor" />
                    </button>
                    <button @click="setTypes('ver')" :class="{ active: layer.flipY }" title="Flip vertical">
                        <svg-icon name="tooler-flipver" />
                    </button>

                    <button></button>
                    <button></button>
                    <button></button>

                    <button @click="setTypes('reset')">
                        <svg-icon name="tooler-reset" />
                    </button>
                </div>

                <div class="factor-custom">
                    <button @click="$emit('global:DESIGN_CUSTOMIZE', layer)">
                        <span>Activate customization</span>
                        <span>Deactivate customization</span>
                    </button>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
import DesignResource from "@/utils/DesignResource.js";
import { mapGetters } from "vuex";
export default {
    props: {
        layer: {
            type: Object,
            required: true,
        },
        piece: {
            type: Object,
            required: true,
        },
    },
    data () {
        return {
            previewFit: "scale-down",
            attribute: null,
            customCache: '',
            inputCache: ""
        };
    },
    watch: {
        'layer.customize' () {
            this.customCache = this.layer.customize;
        }
    },
    computed: {
        ...mapGetters('designer', {
            activeLayer: 'getActiveLayer',
            customizeList: 'getPiecesCustomize',
        }),
        active () {
            return this.layer == this.activeLayer;
        },
        imageDpi () {
            const now_dpi = 300; // 当前dpi
            const piece = this.piece;
            const layer = this.layer;

            if (!piece) {
                return 0;
            } else if (!layer) {
                return 0;
            } else {
                const scale = Math.max(piece.real_width / piece.canvas_width, piece.real_height / piece.canvas_height);
                const realW = layer.w * scale;
                const realH = layer.h * scale;
                return Math.min(layer.cutW / realW, layer.cutW / realW) * now_dpi;
            }
        },
        layerScale: {
            get () {
                // 图片旋转之后的宽高
                // 100缩放是指图片旋转之后的宽高相对于容器旋转之后的宽高比例
                const pieceSize = this.getPieceSize(this.piece);
                const layerSize = this.getLayerSize(this.piece, this.layer);
                const scale = Math.max(layerSize.width / pieceSize.width, layerSize.height / pieceSize.height);
                return scale * 100;
            },
            set (value) {
                if (this.layerScale != value) {
                    // 适应容器时，图片的缩放比例
                    const piece = this.piece;
                    const layer = this.layer;
                    const pieceSize = this.getPieceSize(this.piece);
                    const layerSize = this.getLayerSize(piece, {
                        w: layer.cutW,
                        h: layer.cutH,
                        rotate: layer.rotate,
                    });

                    const scale = Math.max(layerSize.width / pieceSize.width, layerSize.height / pieceSize.height);
                    const w = layer.cutW * 0.01 * value / scale;
                    const h = layer.cutH * 0.01 * value / scale;
                    const x = Math.round(this.layer.x + (this.layer.w - w) / 2);
                    const y = Math.round(this.layer.y + (this.layer.h - h) / 2);

                    this.$store.commit('designer/SET_LAYER_VALUE', {
                        w: w,
                        h: h,
                        x: x,
                        y: y,
                    });
                }
            }
        },
        layerRotate: {
            get () {
                // return this.layer.rotate + this.piece.canvas_rotate;
                return this.layer.rotate;
            },
            set (value) {
                // const rotate = value - this.piece.canvas_rotate;
                const rotate = value;
                // const format = parseInt((180 + rotate) % 360 - 180) || 0;
                this.$store.commit('designer/SET_LAYER_VALUE', { rotate: rotate });
            }
        },

        layerRange () {
            const piece = this.piece || {};
            const layer = this.layer;
            const w = piece.canvas_width || 1;
            const h = piece.canvas_height || 1;

            return {
                minX: - 100 * layer.w / w,
                minY: - 100 * layer.h / h,
            }

        },
        layerLeft: {
            get () {
                const layer = this.layer;
                const piece = this.piece;

                const pieceSize = this.getPieceSize(piece);
                const layerSize = this.getLayerSize(piece, layer);

                // const θ = (360 + piece.canvas_rotate) * Math.PI / 180;
                const θ = (360) * Math.PI / 180;
                const xc = layer.x + 0.5 * layer.w - 0.5 * piece.canvas_width;
                const yc = layer.y + 0.5 * layer.h - 0.5 * piece.canvas_height;
                const x = xc * Math.cos(θ) - yc * Math.sin(θ);

                return 100 * (0.5 * pieceSize.width + x - 0.5 * layerSize.width) / pieceSize.width

            },
            set (value) {

                if (this.layerLeft != value) {

                    const left = value;
                    const top = this.layerTop;

                    const layer = this.layer;
                    const piece = this.piece;

                    const pieceSize = this.getPieceSize(piece);
                    const layerSize = this.getLayerSize(piece, layer);

                    // const θ = (360 - piece.canvas_rotate) * Math.PI / 180;
                    const θ = (360) * Math.PI / 180;

                    const xc = 0.01 * left * pieceSize.width + 0.5 * layerSize.width - 0.5 * pieceSize.width;
                    const yc = 0.01 * top * pieceSize.height + 0.5 * layerSize.height - 0.5 * pieceSize.height;

                    const x1 = xc * Math.cos(θ) - yc * Math.sin(θ);
                    const y1 = xc * Math.sin(θ) + yc * Math.cos(θ);

                    const change = {
                        x: x1 - 0.5 * layer.w + 0.5 * piece.canvas_width,
                        y: y1 - 0.5 * layer.h + 0.5 * piece.canvas_height,
                    }

                    this.$store.commit('designer/SET_LAYER_VALUE', change);
                }
            }
        },
        layerTop: {
            get () {

                const layer = this.layer;
                const piece = this.piece;

                const pieceSize = this.getPieceSize(piece);
                const layerSize = this.getLayerSize(piece, layer);

                // const θ = (360 + piece.canvas_rotate) * Math.PI / 180;
                const θ = (360) * Math.PI / 180;
                const xc = layer.x + 0.5 * layer.w - 0.5 * piece.canvas_width;
                const yc = layer.y + 0.5 * layer.h - 0.5 * piece.canvas_height;
                const y = xc * Math.sin(θ) + yc * Math.cos(θ);

                return 100 * (0.5 * pieceSize.height + y - 0.5 * layerSize.height) / pieceSize.height;

            },
            set (value) {

                if (this.layerTop != value) {

                    const left = this.layerLeft;
                    const top = value;

                    const layer = this.layer;
                    const piece = this.piece;

                    const pieceSize = this.getPieceSize(piece);
                    const layerSize = this.getLayerSize(piece, layer);

                    // const θ = (360 - piece.canvas_rotate) * Math.PI / 180;
                    const θ = (360) * Math.PI / 180;

                    const xc = 0.01 * left * pieceSize.width + 0.5 * layerSize.width - 0.5 * pieceSize.width;
                    const yc = 0.01 * top * pieceSize.height + 0.5 * layerSize.height - 0.5 * pieceSize.height;

                    const x1 = xc * Math.cos(θ) - yc * Math.sin(θ);
                    const y1 = xc * Math.sin(θ) + yc * Math.cos(θ);

                    const change = {
                        x: x1 - 0.5 * layer.w + 0.5 * piece.canvas_width,
                        y: y1 - 0.5 * layer.h + 0.5 * piece.canvas_height,
                    }

                    this.$store.commit('designer/SET_LAYER_VALUE', change);
                }
            }
        },

    },

    methods: {
        customizeClick (e, layer) {
            if (this.activeLayer == layer) {
                return
            } else {
                this.$store.commit("designer/SET_ACTIVE_LAYER", layer);
            }
        },
        // 对齐方式
        setAlign (type) {

            const pieceSize = this.getPieceSize(this.piece);
            const layerSize = this.getLayerSize(this.piece, this.layer);

            if (type == 'left') {
                // 水平居左
                this.layerLeft = 0;
            } else if (type == 'center') {
                // 水平居中
                this.layerLeft = 50 * (pieceSize.width - layerSize.width) / pieceSize.width;
            } else if (type == 'right') {
                // 水平居右
                this.layerLeft = 100 * (pieceSize.width - layerSize.width) / pieceSize.width;
            } else if (type == 'top') {
                // 垂直居上
                this.layerTop = 0;
            } else if (type == 'middle') {
                // 垂直居中
                this.layerTop = 50 * (pieceSize.height - layerSize.height) / pieceSize.height;
            } else if (type == 'bottom') {
                // 垂直居下
                this.layerTop = 100 * (pieceSize.height - layerSize.height) / pieceSize.height;
            }
        },

        // 排版
        setTypes (type) {
            const piece = this.piece;
            const layer = this.layer;
            if (type == 'hor') {
                this.$store.commit('designer/SET_LAYER_VALUE', { flipX: !layer.flipX });
            } else if (type == 'ver') {
                this.$store.commit('designer/SET_LAYER_VALUE', { flipY: !layer.flipY });
            } else if (type == 'tiled') {
                // 平铺
            } else if (type == 'reset') {
                // 重置
                this.$emit('global:DESIGN_RESET_LAYER', { layer: layer, piece: piece });
            }
        },

        // 选中
        setActive (layer) {
            if (this.activeLayer == layer) {
                this.$store.commit("designer/SET_ACTIVE_LAYER", null);
            } else {
                this.$store.commit("designer/SET_ACTIVE_LAYER", layer);
            }
        },


        // 设计区大小
        getPieceSize (piece) {

            const x1 = -piece.canvas_width;
            const y1 = piece.canvas_height;
            const x2 = piece.canvas_width;
            const y2 = piece.canvas_height;
            // const θ = (360 - piece.canvas_rotate) * Math.PI / 180;
            const θ = (360) * Math.PI / 180;

            const w1 = Math.abs(x1 * Math.cos(θ) - y1 * Math.sin(θ));
            const w2 = Math.abs(x2 * Math.cos(θ) - y2 * Math.sin(θ));
            const h1 = Math.abs(x1 * Math.sin(θ) + y1 * Math.cos(θ));
            const h2 = Math.abs(x2 * Math.sin(θ) + y2 * Math.cos(θ));

            return {
                width: Math.max(w1, w2),
                height: Math.max(h1, h2),
            }
        },
        // 图层大小
        getLayerSize (piece, layer) {

            const x1 = -layer.w;
            const y1 = layer.h;
            const x2 = layer.w;
            const y2 = layer.h;
            // const θ = (360 - piece.canvas_rotate - layer.rotate) * Math.PI / 180;
            const θ = (360 - layer.rotate) * Math.PI / 180;

            const w1 = Math.abs(x1 * Math.cos(θ) - y1 * Math.sin(θ));
            const w2 = Math.abs(x2 * Math.cos(θ) - y2 * Math.sin(θ));
            const h1 = Math.abs(x1 * Math.sin(θ) + y1 * Math.cos(θ));
            const h2 = Math.abs(x2 * Math.sin(θ) + y2 * Math.cos(θ));

            return {
                width: Math.max(w1, w2),
                height: Math.max(h1, h2),
            }
        },

        getImagePreview (layer) {
            const url = layer.url;
            const cache = DesignResource.getImageByCache(url, { type: "simple", form: "materials" })
            if (cache) {
                return cache.src;
            } else {
                return this.$getLitimgUrl(url, 'medium')
            }

        },

        setCustomize (event) {
            const name = this.customCache.trim();

            if (!this.layer) {
                // 没有图层
            } else if (name) {
                this.layer.customize = name;
            } else {
                this.customCache = this.layer.customize;
                this.$uxMessage.error("Layer name cannot be empty!");
            }
        }
    },
    created () {
        this.customCache = this.layer.customize;
    }

};
</script>

<style lang="scss" scoped>
.customize-name {
    display: none;
    position: relative;
    white-space: nowrap;
    align-items: center;
    height: 46px;
    line-height: 46px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 24px;
    color: #087196;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;

    .custom-icon {
        z-index: 1;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: default;
        width: 24px;
        height: 24px;
    }

    &>span {
        padding-left: 32px;
        // background-image: url(https://img.podpartner.com/static/images-20230202/custom-icon.png);
        // background-repeat: no-repeat;
        // background-position: left center;
        // background-size: 24px 24px;
        cursor: default;
    }

    .customize-input {
        overflow: hidden;
        position: relative;
        flex: 1;

        &>p {
            opacity: 0;
            max-width: 100%;
            padding: 0 32px 0 8px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
        }

        label {
            max-width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            margin-left: 4px;

            input {
                max-width: calc(100% - 20px);
                height: 24px;
                border: 1px solid transparent;
                padding: 0 4px;
                color: #087196;
                border-radius: 4px;
                outline: none;
                font-size: 14px;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &:focus {
                    max-width: calc(100% - 1px);
                    border-color: #f6b2cd;
                }

                &:focus+svg {
                    display: none;
                }
            }

            svg {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                padding: 4px;
                width: 16px;
                height: 16px;
                color: #1a1a1a;
                cursor: pointer;
                background: transparent;
                border-radius: 4px;

                &:hover {
                    background: #f6f6f6;

                }
            }
        }
    }
}

.factor-custom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    padding: 12px 0;
    border-top: 1px solid #e6e6e6;
    margin-bottom: -12px;

    &>button {
        position: relative;
        height: auto;
        border: none;
    }

    span {
        background: none;
        display: none;

        &:nth-child(1) {
            display: inline;
        }
    }

    &:hover {
        background-color: #ecf4f7;

        &>button {
            color: #087196;
        }
    }
}

.layer-customize {
    .customize-name {
        display: flex;
    }

    .layer-content {
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
    }

    .factor-custom {
        button {
            >span {
                display: none;

                &:nth-child(2) {
                    display: inline;
                }
            }
        }
    }
}

.factor-input .input-number::v-deep {

    &:nth-child(2) input {
        padding-right: 48px;
    }

    // padding-right: 40px;
}
</style>
